import React from 'react';
import { Card, Typography, Button, Upload } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Title, Paragraph } = Typography;
const { Dragger } = Upload;

const FileUpload: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
      <Card className="w-full max-w-2xl shadow-lg">
        <Title level={2} className="text-center">文件上传</Title>
        <Paragraph className="text-center text-gray-500 mb-6">
          请在这里上传您的项目文件或菜单配置文件。
        </Paragraph>
        <Dragger 
          name="file"
          multiple={true}
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76" // 这是一个模拟上传地址
          onChange={(info) => {
            // 在这里处理上传状态变化
          }}
        >
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
          <p className="ant-upload-hint">
            支持单个或批量上传。
          </p>
        </Dragger>
        <div className="text-center mt-8">
          <Button onClick={() => navigate('/project-config')}>
            返回项目配置
          </Button>
        </div>
      </Card>
    </div>
  );
};

export default FileUpload;
